<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="formRef" v-model="form">
      <div class="common-form">应用内容设置</div>
      <el-form-item label="首页轮播图">
        <el-upload
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :auto-upload="false"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <template #trigger>
            <div @click.prevent.stop="showUpload" class="upload-btn">
              <Plus style="width: 2em; height: 2em" />
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </div>
    </el-form>
    <Upload
      v-if="isUpload"
      :config="{ total: 9 }"
      @returnImgs="returnImgsFunc"
      :isupload="isUpload"
      >上传图片</Upload
    >
  </div>
</template>

<script lang="ts" setup>
import { editContent, getContent } from "@/api/appsetting";
import Upload from "@/components/file/Upload.vue";
import { ElMessage, UploadProps, UploadUserFile } from "element-plus";
import { onMounted, ref } from "vue";
const fileList = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const isUpload = ref(false);
const form = ref({
  banner: [],
});
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const showUpload = () => {
  isUpload.value = true;
  return false;
};
const returnImgsFunc = (e: any) => {
  if (e !== null) {
    fileList.value = fileList.value.concat(
      e.map((item) => {
        return {
          name: "",
          url: item.file_path,
        };
      })
    );
  }
  isUpload.value = false;
};
const onSubmit = () => {
  form.value.banner = fileList.value.map((item) => item.url);
  editContent(form.value).then((res: any) => {
    if (res.code !== 1) {
      ElMessage({
        message: res.msg,
        type: "error",
      });
      return;
    }
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  });
};
onMounted(() => {
  getContent().then((res: any) => {
    if (res.code !== 1) {
      ElMessage({
        message: res.msg,
        type: "error",
      });
      return;
    }
    form.value = res.data || ({} as any);
    fileList.value = res.data.banner.map((item: any) => {
      return {
        name: "",
        url: item,
      };
    });
  });
});
</script>

<style lang="scss">
.upload-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
